<template>
	<!--	项目群-->
	<el-row :gutter="6">
		<el-col :span="12">
			<el-card>
				<div style="display: flex;justify-content: space-between;
						align-items: center;">
					<div style="color: #4d62a5;
							font-size: 20px;
							font-weight: 900;">
						项目排名
					</div>
					<ul id="navbutton">
						<li>
							<el-button :class="[
								project_number == 'energy' ? 'asd' : 'asd1',
							]" @click="project_number = 'energy'" @mouseover="changecolor" @mouseleave="changeback" auto- sert-space>能源
							</el-button>
						</li>
						<li>
							<el-button :class="[
						project_number == 'comfort'
							? 'asd'
							: 'asd1',]" @click="project_number = 'comfort'" @mouseover="changecolor" @mouseleave="changeback"
								auto-insert-space>舒适
							</el-button>
						</li>
						<li>
							<el-button :class="[
								project_number == 'seep' ? 'asd' : 'asd1',
							]" @click="project_number = 'seep'" @mouseover="changecolor" @mouseleave="changeback">
								经济表现
							</el-button>
						</li>
					</ul>
				</div>
			</el-card>
			<el-card style="height: 91%">
				<div style="
						display: flex;
						justify-content: space-between;
						align-items: center;">
					<div style="
							color: #4d62a5;
							font-size: 18px;
							font-weight: 900;">
						能源
					</div>
					<div>
						<ul class="chartTitle">
							<li style="
									width: 15px;
									height: 15px;
									background-color: #ffd662;"></li>
							<li>设定项目</li>
							<li style="
									width: 15px;
									height: 15px;
									background-color: #d2e9ff;
									margin-left: 20px;"></li>
							<li>未设定项目</li>
						</ul>
					</div>
				</div>

				<el-divider />
				<div v-if="project_number == 'energy'">
					<div class="cc">
						类似项目:
						<el-select size="small" v-model="project" placeholder="请选择指标" :disabled="showw" clearable
							@change="choiceproject" style="width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						同地区:
						<el-select size="small" v-model="area" :disabled="showtwo" clearable placeholder="请选择指标"
							style="margin-left: 10px; width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						同功能:
						<el-select size="small" v-model="fun" :disabled="showtwo" clearable placeholder="请选择指标"
							style="margin-left: 10px; width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						指标:
						<el-select size="small" v-model="target" placeholder="请选择指标" clearable @change="changezb"
							style="margin-left: 10px; width: 80px">
							<el-option label="总" value="总"></el-option>
							<el-option label="单位面积m²" value="单位面积m²"></el-option>
							<el-option label="机房能效" value="机房能效"></el-option>
						</el-select>
						单位：
						<el-select size="small" v-model="unit" placeholder="请选择单位" clearable @change="changedw"
							style="margin-left: 10px; width: 80px">
							<el-option label="kWh" value="kwh"></el-option>
							<el-option label="tce" value="tce"></el-option>
							<el-option label="RMB" value="RMB"></el-option>
						</el-select>
					</div>
					<el-divider border-style="none" />
					<scEcharts v-if="weishe" style="margin-top: 25px" height="300px" width="100%" :option="option">
					</scEcharts>
					<scEcharts v-show="!weishe" style="margin-top: 25px" width="100%" height="300px" :option="option2">
					</scEcharts>
					<br />
					<div style=" margin-top: 20px;width:100%;">
						<div style="float: left;margin-left:66px; ; font-size: 10px">排名变动</div>

						<el-date-picker style="float: right;margin-right: 42px;" v-model="value1" type="monthrange"
							range-separator="To" value-format="YYYY-MM-DD" start-placeholder="开始月份"
							:disabled-date="disDate" end-placeholder="结束月份" @change="monthchange1" size="mini" />
					</div>
					<scEcharts style="margin-top: 50px;" height="240px" :option="option1"></scEcharts>
				</div>
				<div v-if="project_number == 'comfort'">
					<div class="cc">
						类似项目:
						<el-select size="small" v-model="project1" placeholder="请选择指标" clearable @change="choiceproject"
							style="width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						同地区:
						<el-select size="small" v-model="area" :disabled="showtwo" placeholder="请选择指标"
							style="margin-left: 10px; width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						同功能:
						<el-select size="small" v-model="fun" :disabled="showtwo" placeholder="请选择指标"
							style="margin-left: 10px; width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						指标:
						<el-select size="small" v-model="target" placeholder="请选择指标" @change="changezb"
							style="margin-left: 10px; width: 80px">
							<el-option label="总" value="总"></el-option>
							<el-option label="单位面积m²" value="单位面积m²"></el-option>
							<el-option label="机房能效" value="机房能效"></el-option>
						</el-select>
						单位：
						<el-select size="small" v-model="unit" placeholder="请选择单位"
							style="margin-left: 10px; width: 80px">
							<el-option label="kwh" value="kwh"></el-option>
							<el-option label="tce" value="tce"></el-option>
							<el-option label="RMB" value="RMB"></el-option>
						</el-select>
					</div>
					<el-divider border-style="none" />
					<scEcharts style="margin-top: 0" width="100%" height="300px" :option="option"></scEcharts>
					<div style="float: left;margin-left:66px;margin-top: 40px; font-size: 10px">排名变动</div>
					<br />
					<div style="float: right; margin-top: 20px">
						时间选择：
						<el-date-picker v-model="value2" type="monthrange" range-separator="To"
							value-format="YYYY-MM-DD" start-placeholder="开始月份" end-placeholder="结束月份"
							@change="monthchange2" />
					</div>
					<scEcharts style="margin-top: 60px" width="100%" height="240px" :option="option1"></scEcharts>
				</div>
				<div v-if="project_number == 'seep'">
					<div class="cc">
						类似项目:
						<el-select size="small" v-model="project2" placeholder="请选择指标" clearable @change="choiceproject"
							style="width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						同地区:
						<el-select size="small" v-model="area" :disabled="showtwo" placeholder="请选择指标"
							style="margin-left: 10px; width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						同功能:
						<el-select size="small" v-model="fun" :disabled="showtwo" placeholder="请选择指标"
							style="margin-left: 10px; width: 80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						指标:
						<el-select size="small" v-model="target" placeholder="请选择指标" @change="changezb"
							style="margin-left: 10px; width: 80px">
							<el-option label="总" value="总"></el-option>
							<el-option label="单位面积m²" value="单位面积m²"></el-option>
							<el-option label="机房能效" value="机房能效"></el-option>
						</el-select>
						单位：
						<el-select size="small" v-model="unit" placeholder="请选择单位"
							style="margin-left: 10px; width: 80px">
							<el-option label="kwh" value="kwh"></el-option>
							<el-option label="tce" value="tce"></el-option>
							<el-option label="RMB" value="RMB"></el-option>
						</el-select>
					</div>
					<el-divider border-style="none" />
					<scEcharts style="margin-top: 20px" width="100%" height="300px" :option="option"></scEcharts>
				</div>
			</el-card>
		</el-col>
		<el-col :span="12">
			<el-card style="height: 100%" class="el-card">
				<div style="float: right">
					<el-input style="width: 300px; margin-right: 20px" :prefix-icon="Search" placeholder="项目名称 功能 地点"
						v-model="input">
					</el-input>
					<el-button style="background-color: #4d62a5; color: white" auto-insert-space
						@click="getdata">搜索</el-button>
				</div>
				<el-table style="z-index: 1" @current-change="handleCurrentChange" highlight-current-row
					ref="monthlyPlanTable" :data="state.tableda" @row-dblclick="aaaaaaaaaaa(row, $event)">
					<el-table-column prop="project_name" sortable label="项目名称">
						<template #default="scope">
							<span @row-dblclick="pus(scope.row.projectId)" style="cursor: pointer">
								{{ scope.row.projectName }}
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="city" sortable label="城市">
					</el-table-column>
					<el-table-column prop="functions" sortable label="功能" />
					<el-table-column prop="onlineTime" sortable label="上线时间" />
					<el-table-column prop="img" label="图片">
						<template #default="scope">
							<img :src="
							'http://47.94.22.162:3085/' +
							scope.row.img" @click="floa(scope.row.img, scope.row)" width="80" height="40" alt="" />
						</template>
					</el-table-column>
				</el-table>
				<!-- <el-button @click="setCurrent(state.tableda[1])">Select second row</el-button> -->
				<!-- <img v-show="imga" :src="'http://oao.zhichengshangxin.com/' + img" height="200" width="300" style="
						position: fixed;
						right: 50px;
						bottom: 50px;
						z-index: 2;" alt="" /> -->
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import scEcharts from "@/components/scEcharts";
import { ProjectList, inuserput } from "@/api/model/login";
import { AdminInputs } from "../../api/model/admins";
import { Scalar, ProjectGroupone } from "@/api/model/echarts";
import { useStore } from "vuex";

// import func from "../../../vue-temp/vue-editor-bridge";
// import { stat } from 'fs';

var project_number = ref("energy");
var project = ref("");
var project1 = ref("");
var showw = ref(false);
let group = reactive({
	list: [],
});
var project2 = ref("");
var showtwo = ref(false);
var currentRow = ref();
var monthlyPlanTable = ref();
var area = ref("");
var fun = ref("");
var target = ref("");
var unit = ref("");
var value1 = ref("");
var value2 = ref("");
var imga = ref(false);
var img = ref("");
var vaqwe = ref("");
var zhibiao = ref("");
var danwei = ref("");
var input = ref("");
var weishe = ref(false);
const store = useStore();
var option = reactive({
	legend: {
		orient: "vertical",
		right: 20,
		top: "60%",
		itemHeight: 1,
	},
	grid: {
		right: "15%",
		top: "5%",
		left: "5%",
		bottom: "5%",
		containLabel: true,
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
	},
	xAxis: {
		type: "category",
		data: [
			"项目1",
			"项目2",
			"项目3",
			"昆山假日酒店",
			"项目1",
			"项目1",
			"项目1",
			"项目1",
		],
	},
	yAxis: {
		axisLine: {
			show: true,
		},
		type: "value",
	},
	series: [
		{
			data: [
				{
					value: 0.4,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.58,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.96,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.68,
					itemStyle: {
						color: "#f6f0eb",
					},
				},
				{
					value: 0.56,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.56,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.28,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 1,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
			],
			type: "bar",
		},
		{
			name: "平均数",
			type: "line",
			symbol: "none",
			data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
			itemStyle: {
				color: "blue",
			},
		},
		{
			name: "中位数",
			type: "line",
			symbol: "none",
			data: [0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7],
			itemStyle: {
				color: "black",
			},
		},
		{
			name: "本地先进",
			type: "line",
			symbol: "none",
			data: [0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6],
			itemStyle: {
				color: "green",
			},
		},
		{
			name: "本地强制",
			type: "line",
			symbol: "none",
			data: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
			itemStyle: {
				color: "red",
			},
		},
	],
});

var option2 = reactive({
	legend: {
		orient: "vertical",
		right: 20,
		top: "60%",
		itemHeight: 1,
	},
	grid: {
		right: "15%",
		top: "5%",
		left: "5%",
		bottom: "5%",
		containLabel: true,
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
	},
	xAxis: {
		type: "category",
		data: [
			"项目1",
			"项目2",
			"项目3",
			"昆山假日酒店",
			"项目1",
			"项目1",
			"项目1",
			"项目1",
		],
	},
	yAxis: {
		axisLine: {
			show: true,
		},
		type: "value",
	},
	series: [
		{
			data: [
				{
					value: 0.4,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.58,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.96,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.68,
					itemStyle: {
						color: "#f0c87b",
					},
				},
				{
					value: 0.56,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.56,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 0.28,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
				{
					value: 1,
					itemStyle: {
						color: "#D6EBFA",
					},
				},
			],
			type: "bar",
		},
		{
			name: "平均数",
			type: "line",
			symbol: "none",
			data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
			itemStyle: {
				color: "blue",
			},
		},
		{
			name: "中位数",
			type: "line",
			symbol: "none",
			data: [0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7],
			itemStyle: {
				color: "black",
			},
		},
		{
			name: "本地先进",
			type: "line",
			symbol: "none",
			data: [0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6],
			itemStyle: {
				color: "green",
			},
		},
		{
			name: "本地强制",
			type: "line",
			symbol: "none",
			data: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
			itemStyle: {
				color: "red",
			},
		},
	],
});

var option1 = reactive({
	grid: {
		right: "5%",
		top: "5%",
		left: "5%",
		bottom: "10%",
		containLabel: true,
	},
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: [
			"1月",
			"2月",
			"3月",
			"4月",
			"5月",
			"6月",
			"7月",
			"8月",
			"9月",
			"10月",
			"11月",
			"12月",
		],
	},
	yAxis: {
		axisLine: {
			show: true,
		},
		type: "value",
	},
	series: [
		{
			data: [10, 14, 10, 5, 13, 9, 4, 7, 9, 15, 10, 5],
			type: "line",
			smooth: true,
			lineStyle: {
				color: "#DDDDDD",
			},
			itemStyle: {
				color: "#DDDDDD",
			},
			areaStyle: {
				color: "#F5F6F6",
				opacity: 0.5,
			},
		},
		{
			data: [7, 8, 5, 12, 6, 9, 11, 14, 11, 6, 12, 15],
			type: "line",
			smooth: true,
			lineStyle: {
				color: "#DDDDDD",
			},
			itemStyle: {
				color: "#DDDDDD",
			},
			areaStyle: {
				color: "#F5F6F6",
				opacity: 0.5,
			},
		},
		{
			data: [9, 5, 8, 9, 6, 12, 6, 8, 2, 14, 6, 10],
			type: "line",
			smooth: true,
			lineStyle: {
				color: "#F79646",
			},
			itemStyle: {
				color: "#F79646",
			},
			areaStyle: {
				color: "#F5E9DF",
				opacity: 0.5,
			},
		},
	],
});
var tt = useRouter();
let state = reactive({
	tableda: [],
});
function setRowStyle(row) {
	console.log("2222222", row.row.project_id);
	console.log(vaqwe.value);
	if (row.row.project_id == vaqwe.value) {
		console.log("11111111");
		return {
			backgroundColor: "pink",
			// color: 'red'
		};
	}
}
onMounted(() => {
	geturl();
	getdata();
	getbardata("能源");
	getbottomlist("能源");
});
//右侧表格点击跳转和展示大图
const aaaaaaaaaaa = (a, b) => {
	pus(b.projectId);
};
const handleCurrentChange = (val) => {
	console.log("val", val);
	currentRow.value = val;
	vaqwe.value = val.projectId;
	setRowStyle();
};

watch(area, (newName, oldName) => {
	console.log("newName", newName, oldName);
	if (newName == "") {
		showw.value = false;
	} else {
		showw.value = true;
	}
});
watch(fun, (newName, oldName) => {
	console.log("newName", newName, oldName);
	if (newName == "") {
		showw.value = false;
	} else {
		showw.value = true;
	}
});
watch(project, (newName, oldName) => {
	console.log("newName", newName, oldName);
	if (newName == "") {
		showtwo.value = false;
	} else {
		showtwo.value = true;
	}
});
watch(project_number, (newval, oldval) => {
	if (newval == "energy") {
		getbardata("能源");
		getbottomlist("能源");
		getping("能源");
		getzhong("能源");
		getxianj("能源");
		getqzhi("能源");
	}
	if (newval == "comfort") {
		getbardata("舒适度");
		getbottomlist("舒适度");
		getping("舒适度");
		getzhong("舒适度");
		getxianj("舒适度");
		getqzhi("舒适度");
	}
	if (newval == "seep") {
		getbardata("经济表现");
		getbottomlist("经济表现");
		getping("经济表现");
		getzhong("经济表现");
		getxianj("经济表现");
		getqzhi("经济表现");
	}
	console.log(newval, oldval);
});
//获取左侧柱状图数据
const getbardata = async (types) => {
	var { data: res } = await ProjectGroupone({
		indicatorName: "项目排名",
		firstType: "项目群",
		// secondType: "",
		type: types,
		// thirdType: "",
		projectId: 1,
		dataType: "month",
		dayFrom: "1900-01-01",
		dayTo: "2223-01-02",
	});
	// console.log({
	// 	indicatorName: "项目排名",
	// 	firstType: "项目群",
	// 	secondType: "",
	// 	type: types,
	// 	thirdType: "",
	// 	dataType: "month",
	// 	dayFrom: "1900-01-01",
	// 	dayTo: "2023-01-02",
	// });
	console.log(res, "resssssssssssssssssssssssssssssssssss");
	if (res.data) {
		option.series[0].data[4].value = res.data.commonDailyDataList.length;
	}

};
const geturl = async () => {
	const { data: res } = await inuserput();
	let data = res.data.list[0]
	console.log("info数据", data);
	let info = JSON.parse(data.info);
	localStorage.setItem("name", info.name);
	store.commit("setdata", { name: info.name });
};
//获取平均数数据
const getping = async (first) => {
	var { data: res } = await Scalar({
		indicatorName: "平均数",
		firstType: first,
		secondType: "",
		type: "",
		thirdType: "",
		projectId: 1,
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2223-01-02",
	});
	console.log('平均数', res);
	var ping = [];
	for (var i = 0; i < option.xAxis.data.length; i++) {
		ping.push(res.data.scalarList[0].data);
	}
	option.series[1].data = ping;
};
const floa = (a) => {
	// console.log(a, b, '22222222222222222222');
	imga.value = !imga.value;
	img.value = a;
};
//获取中位数数据
const getzhong = async (first) => {
	var res = await Scalar({
		indicatorName: "中位数",
		firstType: first,
		secondType: "",
		type: "",
		thirdType: "",
		projectId: 1,
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2223-01-02",
	});
	var zhong = [];
	for (var i = 0; i < option.xAxis.data.length; i++) {
		try{
			zhong.push(res.data.scalarList[0].data);
		}catch{
			return false
		}
	}
	option.series[1].data = zhong;
};
//获取先进制数据
const getxianj = async (first) => {
	var res = await Scalar({
		indicatorName: "本地先进",
		firstType: first,
		secondType: "",
		type: "",
		thirdType: "",
		projectId: 1,
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2223-01-02",
	});
	var xj = [];
	for (var i = 0; i < option.xAxis.data.length; i++) {
		try{
			xj.push(res.data.scalarList[0].data);
		}catch{
			return false
		}
	}
	option.series[2].data = xj;
};
//获取本地强制数据
const getqzhi = async (first) => {
	var res = await Scalar({
		indicatorName: "本地强制",
		firstType: first,
		secondType: "",
		type: "",
		thirdType: "",
		dataType: "scalar",
		projectId: 1,
		dayFrom: "1900-01-01",
		dayTo: "2223-01-02",
	});
	var qzhi = [];
	for (var i = 0; i < option.xAxis.data.length; i++) {
		try{
			qzhi.push(res.data.scalarList[0].data);
		}catch{
			return false
		}
		
	}
	option.series[3].data = qzhi;
};

const getdifftypelist = async (second, third) => {
	var { data: res } = await ProjectGroupone({
		indicatorName: "项目排名",
		firstType: "项目群",
		secondType: second,
		thirdType: third,
		dataType: "month",
		dayFrom: "1900-01-01",
		dayTo: "2223-01-02",
		projectId: 1,
	});
	if (res.data) {
		option.series[0].data[4].value = res.data.commonDailyDataList.length;
	}
};
//获取底部折线图数据
const getbottomlist = async (types) => {
	var { data: res } = await ProjectGroupone({
		indicatorName: "项目排名",
		firstType: "项目群",
		secondType: "",
		type: types,
		projectId: 1,
		thirdType: "",
		dataType: "month",
		dayFrom: "2022-01-01",
		dayTo: "2223-01-01",
	});
	console.log(res, "bottom");
	// option1.series[0].data[4].value = res.data.commonDailyDataList.length
	// var xlist=[]
	// res.data.commonDailyDataList.forEach((item)=>{
	//   item.day=`${item.day.substring(6, 7)}月`
	//   if(!xlist.includes(item.day)){
	//     xlist.push(item.day)
	//   }
	// })
	// option1.xAxis.data=xlist
	if (res.data) {
		var type1 = res.data.commonDailyDataList.filter((item) => {
			return item.type == "type1";
		});
		var type2 = res.data.commonDailyDataList.filter((item) => {
			return item.type == "type2";
		});
		var type3 = res.data.commonDailyDataList.filter((item) => {
			return item.type == "type3";
		});
		var data1 = [];
		var data2 = [];
		var data3 = [];
		type1.forEach((item) => {
			data1.push(item.number1);
		});
		type2.forEach((item) => {
			data2.push(item.number1);
		});
		type3.forEach((item) => {
			data3.push(item.number1);
		});
		option1.series[0].data = data1;
		option1.series[1].data = data2;
		option1.series[2].data = data3;
	}


};

//获取右侧表格数据：项目列表
const getdata = async () => {
	let { data: res } = await ProjectList({ keyword: input.value });
	const { data: res1 } = await AdminInputs();
	let { data: res2 } = await inuserput()
	console.log(res2, "用户输入列表");
	console.log("getdatainfo数据", res1);
	let info = JSON.parse(res1.data.list[0].info);
	sessionStorage.setItem("pimg", info.Logo);
	sessionStorage.setItem("pname", info.CompanyName);
	sessionStorage.setItem("epname", info.ECompanyName);
	store.commit("setProject", {
		projectImg: info.Logo,
		projectName: info.CompanyName,
		enProjectName: info.ECompanyName,
	});
	let group1 = JSON.parse(res1.data.list[0].groupss).Project;
	group.list = group1;
	console.log("项目列表", res.data);
	console.log("group.list", group1, "info", info);
	var projnamelist = [];
	let project = [];
	res.data.list.forEach((item) => {
		console.log(
			"res.data.list", group.list.find((opt) => opt.projectId == item.projectId)
		);
		if (group.list.find((opt) => opt.projectId == item.projectId)) {
			projnamelist.push(item.projectName);
			project.push(item);
		}
	});

	option.xAxis.data = projnamelist;
	getping("能源");
	getzhong("能源");
	getxianj("能源");
	getqzhi("能源");
	state.tableda = project;
	console.log("state.tableda", state.tableda);
};

const disDate = (time) => {
	return time.getTime() > Date.now()
}

function monthchange1(val) {
	if (val == null) {
		option1.xAxis.data = [
			"1月",
			"2月",
			"3月",
			"4月",
			"5月",
			"6月",
			"7月",
			"8月",
			"9月",
			"10月",
			"11月",
			"12月",
		];
	}
	// value1.value=val
	// console.log(moment(val).format('YYYY-MM-DD HH:mm:ss'))
	gettimerange(val[0], val[1]);
	// console.log(val)
}
const gettimerange = async (start, end) => {
	var res = await Scalar({
		indicatorName: "项目排名",
		firstType: "项目群",
		secondType: "",
		type: "能源",
		thirdType: "",
		projectId: 1,
		dataType: "month",
		dayFrom: start,
		dayTo: end,
	});
	// console.log(res, "时间范围");
	var xlist = [];
	res.data.commonDailyDataList.forEach((item) => {
		item.day = `${item.day.substring(6, 7)}月`;
		if (!xlist.includes(item.day)) {
			xlist.push(item.day);
		}
	});
	option1.xAxis.data = xlist;
	var type1 = res.data.commonDailyDataList.filter((item) => {
		return item.type == "type1";
	});
	var type2 = res.data.commonDailyDataList.filter((item) => {
		return item.type == "type2";
	});
	var type3 = res.data.commonDailyDataList.filter((item) => {
		return item.type == "type3";
	});
	var data1 = [];
	var data2 = [];
	var data3 = [];
	type1.forEach((item) => {
		data1.push(item.number1);
	});
	type2.forEach((item) => {
		data2.push(item.number1);
	});
	type3.forEach((item) => {
		data3.push(item.number1);
	});
	option1.series[0].data = data1;
	option1.series[1].data = data2;
	option1.series[2].data = data3;
};
function monthchange2() { }

function changecolor() {
	console.log(project_number);
}

function pus(id) {
	console.log(id, "id");
	tt.push({ name: "project_outline", params: { id: id } });
}

function changeback() {
	// event.target.children[0].style.backgroundColor = '#F0F0F0'
	// event.target.style.backgroundColor = '#F0F0F0'
	// event.target.style.color = 'black'
}

function choiceproject(val) {
	console.log("改变");
	console.log(val);
	showtwo.value = true;
	// area.value = val;
	// fun.value = val;
}
const changezb = (val) => {
	zhibiao.value = val;
	getdifftypelist(zhibiao.value, danwei.value);

	console.log(val);
	if (val != "总") {
		weishe.value = true;
	} else {
		weishe.value = false;
	}
};
const changedw = (val) => {
	console.log(val, "asdadsad");
	danwei.value = val;

	getdifftypelist(zhibiao.value, danwei.value);
};
</script>

<style scoped>
::v-deep .el-table__row td {
	padding: 0;
}

/* 用来设置当前页面element全局table 选中某行时的背景色*/
::v-deep .el-table__body tr.current-row>td {
	background-color: #fdeada !important;
	/* color: #f19944;   */
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
/* ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #f19944;
  /* color: #f19944; */
/* 设置文字颜色，可以选择不设置 */
/* } */
/* .el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
} */

::v-deep .asd {
	background-color: #4d62a5;
	color: white;
}

::v-deep .asd1 {
	background-color: #f0f0f0;
	color: black;
}

#navbutton {
	list-style: none;
	float: right;
	margin-top: -5px;
}

#navbutton li {
	display: inline-block;
	margin-right: 20px;
}

.el-button {
	/* background-color: #F0F0F0; */
	width: 80px;
	/* letter-spacing:5px; */
	text-align: center;
}

.chartTitle {
	list-style: none;
}

.chartTitle li {
	display: inline-block;
	margin-right: 5px;
	font-size: 15px;
}

.cc {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

/* .el-table tbody tr:hover>td {
  background: red !important
}

.el-table__body tr.current-row>td.el-table__cell {
  background: red !important
} */
</style>
